"use client"
import Image from "next/image";
import Link from "next/link";
import {Swiper} from "@/components/Swiper";

export default function Page() {
    return (
        <div>
            <ProductBanner/>
            <div className={"mx-auto max-w-7xl"}>
                <ProductsSection/>
            </div>
        </div>

    )
}

const images = [
    '/images/product_banner1.webp',
    '/images/product_banner_2.webp',
]

function ProductBanner() {
    return (
        <div>
            <Swiper images={images}/>
        </div>
    )
}


const title = 'HUAWEI P60';
const products = [

    {
        id: 1,
        title: 'HUAWEI nova 11',
        description: '6.88毫米超薄臻彩直屏',
        cover: '/images/product/Nova11.webp',
        price: '2399',
        oldPrice: '2499'
    },
    {
        id: 2,
        title: 'HUAWEI P60 Pro',
        description: '超聚光夜视长焦',
        cover: '/images/product/P60Pro.webp',
        price: '6088',
        oldPrice: '6988'
    },
    {
        id: 3,
        title: title,
        description: '洛可可白 每一支都独一无二',
        cover: '/images/product/P60.webp',
        price: '4888',
        oldPrice: '4988'
    }
]

function ProductsSection() {
    return (
        <div className={"flex items-center flex-wrap bg-[#fef9e6] p-6 gap-6"}>
            {
                products.map((item, index) =>
                    <ProductCard product={item} key={index}/>
                )
            }
        </div>
    )
}

function ProductCard({product}: {
    product: {
        title: string,
        id: number,
        cover: string,
        description: string,
        price: string,
        oldPrice: string,

    }
}) {
    return (
        <Link href={`/product/detail?id=${product.id}`}
              className={"w-[200px] bg-white  shadow-sm"}>
            <Image src={product.cover} alt={''} width={300} height={400}/>
            <div className={"w-full flex flex-col gap-y-2 justify-center items-center"}>
                <p className={"font-bold"}>{product.title}</p>
                <p className={"text-sm text-gray-400"}>{product.description}</p>
                <div className={"flex items-center gap-x-2"}>
                    <span>¥{product.price}</span>
                    <span className={"text-gray-400 text-xs line-through"}>¥{product.oldPrice}</span>
                </div>
            </div>
        </Link>
    )
}
